<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w2.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Example - Google North America Offices</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQcTQoRJ_JVFHVwderj38GcfiXt6hQX5E6h3W3sV-l-QbtgIls1pN0iAw"
            type="text/javascript"></script>
    <script src="google_northamerica_offices.js" type="text/javascript"></script>
    <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>

    <script type="text/javascript">

	//<![CDATA[
    var map;
    var mgr;
    var icons = {};
    var allmarkers = [];
	var aSpeciesx= [];
	var aSpeciesy=[];

    function load() {
      if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GOverviewMapControl());
        map.setCenter(new GLatLng(50, -98), 3);
//        map.enableDoubleClickZoom();
		aSpeciesx[aSpeciesx.length] = 51;
		aSpeciesx[aSpeciesx.length] = 49;
		aSpeciesy[aSpeciesy.length] =-98;
		aSpeciesy[aSpeciesy.length] =-99;
        mgr = new MarkerManager(map, {trackMarkers:true});
        window.setTimeout(setupOfficeMarkers, 0);
      }
    }

    function setupOfficeMarkers() {
      allmarkers.length = 0;
        var markers = [];
        for (j=0; j<aSpeciesx.length; j++) {
          var posn = new GLatLng(aSpeciesx[j] ,aSpeciesy[j] );
          var marker = createMarker(posn,"mark"+j); 
          markers.push(marker);
          allmarkers.push(marker);
		  alert(j);
        }
        mgr.addMarkers(markers, 0, 16);
      mgr.refresh();
    }
  
    function createMarker(posn, title) {
      var marker = new GMarker(posn, {title: title, draggable:true });
      GEvent.addListener(marker, 'dblclick', function() { mgr.removeMarker(marker) } ); 
      return marker;
    }

    function deleteMarker() {
      var markerNum = parseInt(document.getElementById("markerNum").value);
      mgr.removeMarker(allmarkers[markerNum]);
    }
   
    function clearMarkers() {
      mgr.clearMarkers();
    }
   
    function reloadMarkers() {
      setupOfficeMarkers();
    }
    //]]>
    </script>

  </head>
  <body onload="load()" onunload="GUnload()">
    <input type="button" onclick="deleteMarker()" value="delete marker #:" />
    &nbsp;
    <input type="text" id="markerNum" value="0" size="3"/>
    |
    <input type="button" onclick="clearMarkers()" value="clear all markers" />

    |
    <input type="button" onclick="reloadMarkers()" value="reload all markers" />

    <br/>
    <div id="map" style="width: 600px; height: 400px;"></div>
  </body>
</html>

